<template>
	<div class="w-full">
		<div class="flex items-center absolute top-0 left-0 text-14px cursor-pointer" @click="back">
			<el-icon>
				<ArrowLeft />
			</el-icon>
			<p>
				返回
			</p>
		</div>
		<div class="w-full flex items-center justify-center">
			<div class="w-40%">
				<p class="text-34px text-[#000] font-bold">人脸验证</p>
				<div class="mt-30px flex flex-col justify-center items-center">
					<div @click="callCameraShow = true">
						<img src="/person/face-gray.svg" class="w-140px h-140px">
					</div>
					<p class="text-#333333 text-18px mt-20px">请根据指示完成人脸认证</p>
				</div>
				<p class="mt-30px text-18px text-#20232A">拍摄须知</p>
				<div class="flex items-center justify-between mt-30px">
					<div v-for="(item, index) in list" :key="index" class="flex flex-col items-center">
						<img :src="item.img" class="w-120px h-96px">
						<div class="flex items-center mt-10px">
							<img :src="item.icon" class="w-16px h-16px">
							<p class="ml-20px text-12px">{{ item.title }}</p>
						</div>
					</div>
				</div>
				<div class="mt-60px">
					<el-button color="#114CEE" style="width: 100%;height:50px;font-size: 18px;" @click="next">继续</el-button>
				</div>
			</div>
		</div>
	</div>
	<CallCamera :is-show="callCameraShow"></CallCamera>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import CallCamera from './CallCamera.vue';
const emits = defineEmits(['back', 'next'])

const callCameraShow = ref<boolean>(false);

const closeCallCamera = (val:any) => {
	callCameraShow.value = val;
}
const next = () => {
	emits('next')
}

const back = () => {
	emits('back')
}

const list = ref<any[]>([
	{
		img: '/person/face-gray.svg',
		icon: '/person/right-green.svg',
		title: '标准拍摄'
	},
	{
		img: '/person/face-gray.svg',
		icon: '/person/error-red.svg',
		title: '遮挡面部'
	},
	{
		img: '/person/face-gray.svg',
		icon: '/person/error-red.svg',
		title: '拍摄不全'
	},
	{
		img: '/person/face-gray.svg',
		icon: '/person/error-red.svg',
		title: '光线不去'
	}
])
</script>
<style lang="scss" scoped>
::v-deep .el-collapse {
	border: 1px solid #E5E6EB;
	border-radius: 8px;
	margin-top: 20px;
	min-height: 90px;
}

::v-deep .el-collapse-item__header {
	border: none;
	padding: 0 20px 0 20px;
	border-radius: 10px;
	min-height: 90px;
	box-sizing: border-box;
	font-weight: 300;
}

::v-deep .el-collapse-item.is-active .el-collapse-item__wrap {
	border-radius: 8px;
}
</style>
